<template>
  <div class="my-search">
    <form action="" :class="{changeBg:isBg}">
      <button @mousemove="isButton=true" @mouseout="isButton=false">
        <svg 
          class="icon"
          width="18px"
          height="18px"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            :fill="isButton==true?'#000':'#767676'"
            d="M882.6369 904.308991 730.351542 708.192358c7.884574-6.656607 15.529695-13.647835 22.890336-21.0095 33.348526-33.350572 59.533908-72.194252 77.8296-115.453499 18.948561-44.803415 28.555359-92.378967 28.555359-141.40659 0-49.021483-9.607822-96.593965-28.556383-141.393287-18.295692-43.256176-44.481074-82.09781-77.828576-115.446335S681.053766 113.948215 637.797589 95.652524C592.99929 76.703963 545.429879 67.096141 496.409418 67.096141c-49.021483 0-96.593965 9.607822-141.394311 28.556383-43.256176 18.295692-82.098833 44.482097-115.446335 77.830623-33.348526 33.347502-59.533908 72.189136-77.830623 115.446335-18.948561 44.800345-28.556383 92.371804-28.556383 141.393287 0 49.027623 9.607822 96.603175 28.556383 141.40659 18.295692 43.259246 44.481074 82.10395 77.8296 115.453499 33.347502 33.349549 72.189136 59.536978 115.446335 77.833693 44.800345 18.948561 92.371804 28.556383 141.394311 28.556383 49.019437 0 96.590895-9.608845 141.389194-28.557406 12.920264-5.465478 25.436322-11.649318 37.541011-18.502399l154.415882 198.860117c11.339256 14.603603 31.987528 17.545608 46.119387 6.572696l1.705851-1.325182C891.713626 939.6458 893.977179 918.912593 882.6369 904.308991zM496.409418 732.173538c-166.428473 0-301.82928-135.410016-301.82928-301.851792 0-166.428473 135.399783-301.828256 301.82928-301.828256 166.423357 0 301.818023 135.399783 301.818023 301.828256C798.228465 596.763522 662.832775 732.173538 496.409418 732.173538z"
          />
        </svg>
      </button>
      <div>
        <input title="search unplush" @focus="isBg=true" @blur="isBg=false" type="text" placeholder="Search free high-resolution photos" />
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data(){
    return{
isBg:false,
isButton:false
    }
  },
  methods:{
   
  }
};

</script>

<style>
.my-search {
  display: inline-block;
  padding: 0rem 0.625rem;      
flex: 0.9;
}
.my-search> form {
  background-color: #eeeeee;
  border-radius: 1.25rem;
  display: flex;
  justify-content: space-between;
  padding: 0.625rem 0.625rem;
  border: 1px solid rgba(255,255,255,0);

}
.my-search> form:hover{
  border: 1px solid #d1d1d1;
}

.my-search form > button {
  border: 0rem;
  border-radius: 1.25rem 0rem 0rem 1.25rem;
  width: 1.75rem;
  margin-left: -0.3125rem;
  background-color: rgba(255,255,0,0);
}

.my-search form > div {
  width: 98%;
  background-color: rgba(255,255,0,0);
}

.my-search form > div > input {
  border: 0rem;
  width: 98%;
  background-color: rgba(255,255,0,0);
}
.changeBg{
  border: 1px solid #d1d1d1 !important;
  background-color: #fff !important;
}
</style>